.rank_box {
    width: 100vw;
    // 头部导航
    .rank_hd {
        width: 100%;
        margin-top: 38px;
        .hd_sticky {
            position: sticky;
            position: -webkit-sticky;
            top: 38px;
            z-index: 30;
            background: #fff;
        }
    }
}

.container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .con_left {
        width: 22%;
        position: fixed;
        top: 74px;
        .left_sidebar {
            width: 100%;
            .s_item {
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                font-size: 14px;
                position: relative;
            }
            .active_boxleft::after {
                content: " ";
                display: inline-block;
                width: 3px;
                height: 16px;
                border-radius: 20px;
                background: #f00;
                position: absolute;
                top: 17px;
                right: 6px;
                animation: co_animation 1.5s linear;
            }
            .active_co {
                background: rgb(248, 248, 248);
                color: #f00;
                animation: co_animation 1s linear;
            }
        }
    }
    .con_right {
        width: 76%;
        margin-left: 24%;
        overflow: hidden;
    }
}

// 
@keyframes co_animation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}